<template>
  <div id="docOrder">
    <!--  支付类型选择 -->
    <div class='mc1' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>订单管理</div>
    </header>
    <div class="nav">
      <div class="active" @click='tabToggle(0,sentPage,"click")'>
        <a class="">
          <b>已完成订单</b>
        </a>
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        <a class="">
          <b>未完成订单</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class='mc' v-if="list.length<1">
        <!-- <img src="../../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>您还没有相关的订单</p>
      </div>
      <ul class="list">
        <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
          <li v-for="(item,index) in list" :key='index' class="kind">
            <a>
              <ul>
                <li style="justify-content: space-around;background: #fff;
                line-height: 50px;height: 50px;">
                  <i @click.stop='goAdd(item)' class='finish'>
                    <img src="../../../image/add.png" alt="" style="margin-top:6px">
                    我要加单</i>
                  <i @click.stop='goAddOrder(item.order_num,item)'>
                    <img src="../../../image/list.png" alt="" style="margin-right:9px">
                    加单列表</i>
                </li>

                <li v-if="user=='clinic'">
                  <span style="color:rgba(0,0,0,0.7);font-size: 15px;margin-left:9px">
                    {{JSON.parse(item.docinfo).name}}
                  </span>
                  <span style="color:rgba(0,0,0,0.4);font-size: 11px">{{JSON.parse(item.docinfo).phone}}</span>
                </li>
                <li style="justify-content: space-between">
                  <span>
                    <b class="address">
                      <img src="../../../image/end.png" alt="">
                      诊室名:{{item.clinicname}}
                    </b>
                  </span>
                  <span style="color:#3dc983;font-size: 15px;">￥{{item.total_price}}</span>
                </li>
                <li>
                  <span>
                    <b class="address" style="width:3rem;"><img src="../../../image/address.png" alt="">
                      诊室地址:{{item.address}}
                    </b>
                  </span>
                </li>
                <li>
                  <span>
                    <b class="address">
                      <img src="../../../image/start.png" alt="">
                      订单号:{{item.order_num}}
                    </b>
                  </span>
                </li>
                <li v-if='user=="clinic"' style="align-items: center;justify-content: space-between;height: 50px;">
                  <i @click.stop='goOrderDetails(item)' style="width: 67px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    border-radius: 15px;
                    font-size: 12px;
                    color: rgb(67,216,166);
                    border: 1px solid rgb(67,216,166);
                    margin-left: 8px;">查看订单</i>
                </li>
                <li style="align-items: center;justify-content: space-between;height: 50px;" v-if='user=="doctor"'>
                  <i @click.stop='goOrderDetails(item)' style="width: 67px;
                                height: 28px;
                                line-height: 28px;
                                text-align: center;
                                border-radius: 15px;
                                font-size: 12px;
                                color: rgb(67,216,166);
                                border: 1px solid rgb(67,216,166);
                                margin-left: 8px;">查看订单</i>
                  <span></span>
                  <span>
                    <router-link :to='{name:"docComment",query: {order_num:item.order_num,clinicid: item.clinicid,clinicName:item.clinicname,name:"clinic"}}'
                      v-show='type=="已完成"&&item.status == "pay"'>服务评价</router-link>
                    <a v-show='item.status == "unpay"' @click.stop='goPay(item)' class="pay">付款</a>
                    <a v-show='item.status!="pay"' @click.stop="cancelOrder(item)">取消订单</a>
                  </span>
                </li>
              </ul>
            </a>
          </li>
        </Loadmore>
      </ul>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore,
    MessageBox
  } from 'mint-ui';
  export default {
    data() {
      return {
        zhifu: true,
        isdocType: false, //是否显示就诊类型选择
        list: [],
        order_num: '',
        total_price: '',
        slotsDocType: [{
          values: ['微信', '支付宝'],
          className: 'slot1',
          textAlign: 'center'
        }, ],
        userid: '',
        type: '已完成',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        user: '', //判断入口 医生or诊室
      }
    },
    components: {
      Loadmore,
    },
    filters: {

    },
    methods: {
      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        if (this.valuesDocType == '微信') {
          this.isdocType = false;
          const data = {
            order_num: this.order_num,
            total_fee: this.total_price,
            des: '开业牙医'
          };
          this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
            var params = {
              partnerid: r.data.mch_id, // merchant id 
              prepayid: r.data.prepay_id, // prepay id 
              noncestr: r.data.nonce_str, // nonce 
              timestamp: r.data.timestamp, // timestamp 
              sign: r.data.sign, // signed string 
            };
            Wechat.sendPaymentRequest(params, function () {
            this.$utils._toast('支付成功');
          }, function (reason) {
            this.$utils._toast(reason);
          });
          }, err => {
            console.log(err);
          }, false, false)



        } else if (this.valuesDocType == '支付宝') {
          //   支付宝支付
          this.isdocType = false;
          let data = {
            order_num: this.order_num,
            subject: '开业牙医',
            amount: this.total_price
          };

       this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
            var params = r.data.data;
            cordova.plugins.alipay.payment(params, function () {
              this.$utils._toast('支付成功');
            }, function (reason) {
              this.$utils._toast(reason);
            });
          }, err => {
            console.log(err);
          }, false, false)
        }
      },
      goPay(item) {
        this.zhifu = true
        // 获取共享信息列表
        var b = []
        this.$api.get(this.$api.baseURLSchool, "selectdata2/chairs_time?chairid=" + JSON.parse(item.docinfo).chairid +
          "&startdate=" + JSON.parse(item.docinfo).startdate, {}, r => {
            if (r.data.ret == 1) {
              for (var i = 8; i < 24; i++) {
                if (JSON.parse(r.data.info[0].timeobj)[i].status == 4) {
                  b.push(i)
                }
              }
              for (var i = 0; i < JSON.parse(item.docinfo).select_timeArr.length; i++) {
                for (var j = 0; j < b.length; j++) {
                  if (JSON.parse(item.docinfo).select_timeArr[i] == b[j]) {
                    this.$utils._toast("你所选的时段已卖出,请重新下单");
                    this.zhifu = false
                    return;
                  }
                }
              }
              if (this.zhifu) {
                this.isdocType = true //是否显示就诊类型选择
                this.order_num = item.order_num
                this.total_price = item.total_price
              }
            }
          }, err => {
            console.log(err);
          })
      },
      goBack() {
        if (JSON.parse(localStorage.getItem('type')) == 'clinic') {
          this.$router.push({
            name: 'home',
          });
        } else {
          this.$router.push({
            name: 'ImDoctor',
          });
        }

      },
      // 加单列表
      goAddOrder(order_num, item) {
        // 获取共享信息列表
        // var b = []
        this.$api.get(this.$api.baseURLSchool, "selectdata2/chairs_time?chairid=" + JSON.parse(item.docinfo).chairid +
          "&startdate=" + JSON.parse(item.docinfo).startdate, {}, r => {
            this.$router.push({
              name: 'addOrder',
              query: {
                old_order_num: order_num,
                user: this.user
              }
            });
          }, err => {
            console.log(err);
          })

      },
      goAdd(item) {
        // 获取共享信息列表
        // var b = []
        this.$api.get(this.$api.baseURLSchool, "selectdata2/chairs_time?chairid=" + JSON.parse(item.docinfo).chairid +
          "&startdate=" + JSON.parse(item.docinfo).startdate, {}, r => {
            if (r.data.ret == 1) {
              this.$router.push({
                name: 'toolsSelect',
                query: {
                  docOrderId: item.id,
                  clinicid: item.clinicid,
                  order_num: item.order_num,
                  useTime: JSON.parse(item.docinfo).select_timeArr.length
                }
              });
            }
          }, err => {
            console.log(err);
          })

      },
      // 订单详情
      goOrderDetails(item) {
        this.$router.push({
          name: 'docOrderDetails',
          query: {
            user: this.user,
            type: this.type,
            id: item.id
          }
        });
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push({
            name: 'login1'
          })
          return false;
        } else {
          return true;
        }
      },
      //办卡详情
      clinicCard(item) {
        this.$router.push({
          name: 'clinicCard',
          query: {
            user: this.user,
            type: this.type,
            id: item.id
          }
        });
      },
      //判断入口 医生还是诊室
      judgmentUser() {
        this.user = this.$route.query.user
      },
      cancelOrder(item) {
        MessageBox.confirm('确定要取消该订单?').then(action => {
          var params = {
            id: item.id
          }
          this.$api.post(this.$api.baseURLSchool, "updatedata/doctor_order/del", params, r => {
            if (r.data.ret == 1) {
              this.tabToggle(1, this.sentPage);
            }
          }, err => {
            console.log(err);
          })
        }, r => {});
      },
      //判断入口 是医生的订单管理 还是诊室的订单管理 获取对应状态的订单列表
      tabToggle(i, params, click) { //0已完成 1未完成
        $('.nav div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        this.user = this.$route.query.user
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = '已完成';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_doctor_order_clinic/0?" + this.user + "id" +
            "=" + this.userid + "&status=pay", params, r => {
              this.totalNum = r.data.records;
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })
        }
        if (i == 1) {
          this.type = '未完成';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_doctor_order_clinic/0?" + this.user + "id" +
            "=" + this.userid + "&status=unpay", params, r => {
              this.totalNum = r.data.records;
              const date1 = new Date().setHours(0, 0, 0, 0); //获取当前时间
              var date2;
              for (var i = 0; i < r.data.rows.length; i++) {
                date2 = new Date(JSON.parse(r.data.rows[i].docinfo).startdate).getTime();
                if (date2 < date1) {
                  var params = {
                    id: r.data.rows[i].id
                  }
                  this.$api.post(this.$api.baseURLSchool, "updatedata/doctor_order/del", params, r => {
                    if (r.data.ret == -3) {
                      localStorage.clear();
                      this.isLogin()
                    }
                    if (r.data.ret == 1) {
                      this.tabToggle(1, this.sentPage);
                    }
                  }, err => {
                    console.log(err);
                  })
                }
              }
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })


        }
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        if (this.type == '已完成') {
          setTimeout(() => {
            this.tabToggle(0, this.sentPage);
          }, 20);
        } else if (this.type == "未完成") {
          setTimeout(() => {
            this.tabToggle(1, this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
    },
    created() {
      this.judgmentUser();
      this.tabToggle(0, this.sentPage);
      this.isLogin()
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .address {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 5px;
  }

  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .mc1 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        display: flex;
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad,  #67b296);
        padding: 0 25px;

        a {
          flex: 1;
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }

</style>
